<template>
  <div>
    <p>这是navber组件</p>
    <!-- <ul>
             <li v-for="data in datalist" :key=data.filmId>
                {{data.name}}
            </li>
        </ul>-->
    <!-- swiper的key值解决数据处理不同步的问题，使其异步处理；原理：datalist数据更新重新创建该节点 -->
    <swiper :key="datalist.length" spr="swiper1">
      <swiper-item v-for="data in datalist" :key="data.filmId" class="hiden">
        <!-- 当轮播swiper的look属性设置为TRUE时，该点击事件在第二次会出现问题，此时要用swiper专用的点击事件 -->
        <div class="apx" @click="skip(data.filmId)"> 
          <div style="float: left">
            <img :src="data.poster" />
          </div>

          <div style="float: left" class="outBorder">
            <div>
              <span class="title">{{ data.name }}</span>
            </div>
            <div>
              <span class="label">观众评分：</span>
              <span class="grage">{{ data.grade }}</span>
            </div>
            <div class="label playactor">
              <span>主演：</span>
              <span>{{ data.actors | playactor }}</span>
            </div>
            <div class="label">
              <span>{{ data.nation }} | </span>
              <span>{{ data.runtime }}</span>
            </div>
          </div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
// 导入
import axios from 'axios'
import Vue from 'vue'
import swiper from './Swiper.vue'
import swiperItem from './SwiperItem.vue'

// 主演部分的数据处理
Vue.filter('playactor', (data) => {
  // console.log(data.map(item=>item.name).join(' '));
  return data.map((item) => item.name).join(' ')
})

export default {
  components: {
    swiper,
    swiperItem
  },

  data () {
    return {
      datalist: []
    }
  },
  methods:{
    skip(id){
      var url = window.location.href
      // console.log(url.split('/').slice(-2));
      // 防止重复点击，产生错误;  拆分并获取网址的最后两个值
      var ask = url.split('/').slice(-2);
      if(ask[1] != id){
        // console.log("------>"+id);
        this.$router.push(`/astest/${id}`) // 注意那不是单引号  这个~
      }
      
    }
  },
  // DOM创建完成后触发
  mounted () {
    // console.log("kkkkk");
    // axios.get('/test.json').then((res) => {
    //   console.log(res.data.data.films)
    //   this.datalist = res.data.data.films
    // }),
    // 更加动态的获取数据，headers部分为请求头；URL的k值是随机的
    axios({
      url:'https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=3605243',
      headers:{
        'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"16616747421270932362493953","bc":"310100"}',
        'X-Host':'mall.film-ticket.film.list'
      }
    }).then(res => {
      // console.log(res.data.data.films);
      this.datalist = res.data.data.films
    })
  },

}
</script>
// scopet 让该样式有独立的命名空间
<style lang="scss" scoped>
.hiden {
  text-align: left;
//   overflow: hidden;
//   padding: 1.5rem;
  .apx {
    padding: 15px 15px 15px 0;
    height: 94px;
    position: relative;
    padding-left: 36%;
    width: 25rem;
    .outBorder {
      display: block;
      padding-left: 12px;
      padding-top: 6px;
      padding-bottom: 6px;
      padding-right: 12px;
      width: 18rem;
    }
    img {
      width: 5.2rem;
    }
    .title {
      color: #191a1b;
      font-size: 16px;
      height: 22px;
      line-height: 22px;
      margin-right: 5px;
    }
    .label {
      font-size: 13px;
      margin-top: 4px;
      color: #797d82;
    }
    .grage {
      color: #ffb232;
      font-size: 14px;
    }
    .playactor {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        // background-color: #ffb232;
    }
  }
}
</style>
